<template>
	<view class="bg-white">
		<view class="flex flex-direction padding-lg" style="min-height: 100vh;">
			<view class="" style="flex: auto">
				<view class="text-xxl" style="margin-top: 160rpx">
					亲，欢迎登录
				</view>
				
				<view class="padding-top-xl">
				
					<view>
						<u--input v-model="phone" type="number" placeholder="请输入手机号" border="bottom">
						</u--input>
					</view>
				
					<view class="margin-top" v-if="loginType == 0">
						<u-input v-model="code" type="number" placeholder="请输入验证码" border="bottom">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" :seconds="seconds" changeText="X秒重新获取">
								</u-code>
								<u-button @tap="getCode()" :text="tips" type="success" size="mini" color="#fff"
									:customStyle="{color:'#ea3457'}" >
								</u-button>
							</template>
						</u-input>
					</view>
				
					<view class="margin-top" v-if="loginType == 1">
						<u--input v-model="password" password placeholder="请输入密码" border="bottom">
						</u--input>
					</view>
				</view>
				
				<view class="flex flex-between margin-top padding-lr-sm">
					<view>
						<text @tap="loginType = 1" v-if="loginType == 0">密码登录</text>
						<text @tap="loginType = 0" v-if="loginType == 1">验证码登录</text>
					</view>
					<navigator url="/pages/register/userregister">去注册</navigator>
				</view>
			
				<view class="flex justify-center login-btn" style="margin-top: 50rpx;">
					<u-button @click="submit" :disabled="disabled" type="primary" :loading="loading"
						:text="loading ? '' : '确认登录'" :loadingText="loading ? '登录中...' : ''" color="#ea3457" size="large"
						shape="circle">
					</u-button>
				</view>
			</view>
			
			<view class="flex-shrink">
				<view class="flex justify-center">
					<view class="text-center">
						<view class="">
							<image src="@/static/images/ico/wx.png" mode="widthFix" style="width: 65rpx; height: 65rpx;">
							</image>
						</view>
						微信
					</view>
					<view class="text-center margin-left-xxl padding-left">
						<view class="">
							<image src="@/static/images/ico/qq.png" mode="widthFix" style="width: 65rpx; height: 65rpx;">
							</image>
						</view>
						QQ
					</view>
					<view class="text-center margin-left-xxl padding-left">
						<view class="flex justify-center" @tap="$routerGo('/pages/login/login-select')">
							<image src="@/static/images/ico/sfqh.png" mode="widthFix" style="width: 65rpx; height: 65rpx;">
							</image>
						</view>
						身份
					</view>
				</view>
				<view class="flex margin-top-xl">
					<u-checkbox-group v-model="checkboxValue" size='28rpx'>
						<u-checkbox :name="1" label="我已阅读并同意遵守" activeColor="red"></u-checkbox>
					</u-checkbox-group>
					<text>《用户协议》</text>
				</view>
			</view>
		</view>
		

		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false, // 等待开关
				phone: '',
				password: '',
				checkboxValue: [], //使用手册

				code: '', //验证码
				tips: '',
				seconds: 60,

				loginType: 0, //登陆方式 0 验证码登陆，1密码登录
				
				userinfo:{},
			}
		},
		computed: {
			disabled() {
				// 必须输入登录名、密码或者验证码 才能点击下一步
				if(this.loginType == 0) {
					if (this.phone && this.code) return false
				}
				if(this.loginType == 1) {
					if (this.phone && this.password) return false
				}
				return true
			}
		},
		onLoad(e) {
			console.log(e);
		},

		methods: {
			change(e){
			            console.log('e:',e);
			        },
			agreement() {
				this.$routerGo('/pages/login/agreement')
			},

			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!this.validate()){
					return
				}
				
				//请求数据
				this.$H.post('/SendsmsInfo/',{
					MobilePhone:this.phone,
					Usertype:2
				},{
					native:true
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					// 倒计时
					this.seconds = 60
					let timer = setInterval(()=>{
						if (this.seconds >= 1) {
							this.seconds--
						} else {
							this.seconds = 0
							clearInterval(timer)
						}
					},1000)
				})
			},
			
			// 表单验证
			validate(){
				//手机号正则
				var mPattern = /^1[34578]\d{9}$/; 
				if (!mPattern.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false
				}
				// ...更多验证
				return true
			},
			
			submit() {
				let urlpw=""
				let urlcode=""
				let params=""
				
				if (this.loading) return
				
				if (this.checkboxValue.length == 0) return this.$toast('请先阅读并同意用户协议')
				
				// 手机验证码登录
				if (!this.validate()) return;
				
				if(this.value==0) return this.$toast('请选择注册用户类型')
				
				this.loading = true
				
				//return
				
				urlpw = '/LoginBypwInfo/'
				urlcode = '/LoginBycodeInfo/'
				params = {
					Loginname:this.phone,
					Usertype:2,
					Password:this.password,
					Verifycode:this.code
				}
				if(this.loginType == 0) {
					this.$H.post(urlcode,params).then(res =>{
						console.log(res);
						if(res.code==200)
						{
							this.$toast(res.msg);
							uni.setStorageSync('userToken',`${res.token}`,'usertype', `${res.ytpe}`);
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}, 1000);
							this.loading = false
						}
						else
						{
							this.$toast(res.msg)
							this.loading = false
						}
					}).catch((err) => {
						this.loading = false
						this.password = ''
						console.log(err, 'err')
					})
				}
				if(this.loginType == 1) {
					this.$H.post(urlpw,params).then(res =>{
						console.log(res.code);
						if(res.code==200)
						{
							for(var i = 0; i < res.data.length; i++){
								if(typeof sessionStorage !== 'undefined')
								{
									sessionStorage.setItem("userlogin", JSON.stringify(res.data));
								}
							        console.log(res.data[i].TockenID + " " + res.data[i].Usertype);
									uni.setStorageSync('userToken', `${res.data[i].TockenID}`,'usertype', `${res.data[i].Usertype}`);
							}	
							
							this.$toast(res.msg);
							//uni.setStorageSync('userToken',`${res.token}`,'usertype',`${res.ytpe}`);
							
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1000);
							this.loading = false
						}
						else
						{
							this.$toast(res.msg)
							this.loading = false
						}
					}).catch((err) => {
						this.loading = false
						this.password = ''
						console.log(err, 'err')
					})
				}

			}, 

		}
	}
</script>

<style lang="scss" scoped>

</style>
